<template>
  <div class="search-box-wrapper">
    <div class="search-input">
      <i class="icon-search search"></i>
      <input
        v-model="query"
        :placeholder="placeholder"
        ref="query"
        />
      <i
        class="icon-dismiss clear"
        v-show="query"
        @click="handleClearClick"
        ></i>
    </div>
  </div>
</template>

<script>
import { debounce } from 'common/js/utils'
export default {
  name: 'SearchBox',
  props: {
    placeholder: {
      type: String,
      default: '搜索歌曲、歌手'
    }
  },
  data () {
    return {
      query: ''
    }
  },
  methods: {
    handleClearClick () {
      this.query = ''
    },
    addQuery (query) {
      this.query = query
    },
    blur () {
      this.$refs.query.blur()
    }
  },
  created () {
    this.$watch('query', debounce((newQuery) => {
      this.$emit('query', newQuery)
    }, 200))
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .search-box-wrapper {
    .search-input {
      position: relative
      .search {
        position: absolute
        left: 8px
        top: 0
        line-height: 32px
        font-size: 16px
        color: $color-text-l
      }
      input {
        width: 100%
        height: 32px
        line-height: 32px
        padding: 0 32px
        box-sizing: border-box
        border-radius: 6px
        font-size: $font-size-small
        background: $color-highlight-background
        color: $color-text-d
        font-weight: bold
        outline: none
        &:focus {
          box-shadow: 0px 0px 0px 1px $color-theme
        }
      }
      .clear {
        position: absolute
        right: 8px
        top: 0
        line-height: 32px
        font-size: 12px
        color: $color-dialog-background
      }
    }
  }
</style>
